﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="wfUserRegister.aspx.cs" Inherits="msBsc.WebUi.wMall.Public.wfUserRegister" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>用户注册</title>
    <link href="/jqPlugin/SelectSimu/css/base.css" rel="stylesheet" />
    <link href="/themes/wStyle1/css/sLayout.css" rel="stylesheet" />
    <link href="/themes/wStyle1/css/sFoot.css" rel="stylesheet" />
    <link href="/themes/wStyle1/css/Public/sTravel.css" rel="stylesheet" />
    <link href="/jqPlugin/layer/skin/layer.css" rel="stylesheet" />
    <style type="text/css">
        .c_title {
            color: #b9b9b9;
            font-size: 28px;
            margin-left: 15px;
            text-align: left;
        }
        
    
        .n_title {
            max-width: 150px;
        }

        .boder-left {
            border-left: 2px solid #dedede;
            margin-top: 50px;
            max-height: 59px;
            width: 3px;
        }

        .cler {
            border-bottom: none;
        }

        .title_boder_botton {
            border-bottom: 3px solid #3398dc;
        }
        /*注册表单*/
        .max_content {
            margin: auto;
            width: 1200px;
        }

        .form_list {
            width: 430px;
            margin: 45px auto auto 45px;
        }

        .control-span {
            color: #999;
            display: block;
            float: left;
            font-family: 微软雅黑;
            font-size: 15px;
            text-align: right;
            width: 120px;
        }

        .required {
            color: red;
            vertical-align: middle;
        }

        .form_list li {
            margin: 23px auto 10px auto;
        }

        .input {
            border: 1px solid #cccccc;
            color: #999;
            float: none;
            font-family: arial,"宋体";
            font-size: 14px;
            height: 16px;
            overflow: hidden;
            padding: 10px 25px 10px 5px;
            width: 238px;
        }

        .i-name {
            background: transparent url("/themes/wStyle1/Images/Public/one4.jpg") no-repeat scroll 0 0;
            height: 16px;
            top: 9px;
            width: 16px;
            position: absolute;
            right: 25px;
        }

        .i-pass {
            background: transparent url("/themes/wStyle1/Images/Public/one5.jpg") no-repeat scroll 0 0;
            height: 19px;
            top: 10px;
            width: 14px;
            position: absolute;
            right: 25px;
        }

        .i-emal {
            background: transparent url("/themes/wStyle1/Images/Public/one6.jpg") no-repeat scroll 0 0;
            height: 19px;
            top: 10px;
            width: 20px;
            position: absolute;
            right: 25px;
        }

        .blank {
            float: none;
            height: 16px;
            left: 243px;
            padding: 3px;
            position: absolute;
            top: 7px;
            width: 16px;
        }

        .t_box {
            position: relative;
        }

        .text-1 {
            width: 128px;
        }

        .img_validata {
            cursor: pointer;
            float: right;
            width: 96px;
            margin-right: 15px;
        }

            .img_validata img {
                width: 90px;
                height: 38px;
            }

        .protecol {
            margin-left: 48px;
        }

        .up-btn2 {
            background-color: #3398dc;
            border-radius: 2px;
            color: #fff;
            cursor: pointer;
            display: inline-block;
            font-weight: 700;
            line-height: 1;
            margin-left: 121px;
            padding: 10px 34px;
            text-align: center;
            width: 208px;
        }

        .tipsq {
            color: #ff9600;
            font-size: 12px;
            position: relative;
            margin-left: 20px;
        }
    </style>
</head>
<body>
    <%=msBsc.WebUi.Code.QtHtmlGet.GetHeader("欢迎注册") %>
    <div class="max_content">
        <ul class="form_list">
            <li>
                <div class="control-span"><span class="required">*</span>邮箱:</div>
                <div class="controls t_box">
                    <input type="text" class="input" id="txtUserName" />
                    <i class="i-emal"></i>
                    <div class="tipsq">*邮箱地址将作为您的登录帐号。</div>
                </div>
            </li>
            <li>
                <div class="control-span"><span class="required">*</span>密码:</div>
                <div class="controls t_box">
                    <input type="password" class="input" id="txtPromtPassword" />
                    <i class="i-pass"></i>
                </div>
            </li>
            <li>
                <div class="control-span"><span class="required">*</span>确认密码:</div>
                <div class="controls t_box">
                    <input type="password" class="input" id="txtPromtComfirPassword" />
                    <i class="i-pass"></i>
                </div>
            </li>
            <li>
                <div class="control-span"><span class="required">*</span>验证码:</div>
                <div class="controls t_box">
                    <input type="text " class="input text-1" id="txtValidata" />
                    <div class="img_validata" id="imgValidata"></div>
                </div>
            </li>
            <li>
                <div class="protecol">
                    <input type="checkbox" checked="checked" id="chkAgreeProtecol" /><label for="chkAgreeProtecol">我已阅读并同意 </label>
                    <a style="color: #1a9bf2; text-decoration: underline" href="/wp_Announcement.htm">地接客服务协议</a>
                </div>
            </li>
            <li>
                <span class="up-btn2" id="button_submit" onclick="Register('register');">立即注册</span>
            </li>
        </ul>
    </div>
    <%=msBsc.WebUi.Code.QtHtmlGet.GetFloorHtml() %>
    <!--start JS引用-->
    <script src="/jqPlugin/js/jquery-1.8.3.min.js"></script>
    <script src="/jqPlugin/js/jBase.js"></script>
    <script src="/jqPlugin/js/jBPage.js"></script>
    <script src="/jqPlugin/js/laytpl.js"></script>
    <script src="/themes/wStyle1/js/comm/VerifyJs.js"></script>
    <script src="/jqPlugin/layer/layer.min.js"></script>
    <script type="text/javascript">
        (function () {
            jQuery.getValidateImg('imgValidata');

            $("#invatationCode").val(GetQueryStr('invatationCode'));

            document.onkeydown = function (e) {
                var ev = document.all ? window.event : e;
                if (ev.keyCode == 13) {
                    Register("register");
                }
            }
            CheckInput();

            //ChangeOnTime();
        })();

        //判断输入框应显示的内容
        function CheckInput() {
            //判断用户名当前输入状态
            $("#txtUserName").blur(function () {
                var UserName = $.trim($("#txtUserName").val());
                vfcUser(UserName, "txtUserName");
            });

            //判断密码当前输入状态
            $("#txtPromtPassword").blur(function () {
                var Password = $.trim($("#txtPromtPassword").val());
                vfcPassword(Password, "txtPromtPassword");
            })

            //判断确认密码当前输入状态
            $("#txtPromtComfirPassword").blur(function () {
                var Password = $.trim($("#txtPromtPassword").val());
                var ComfirPassword = $.trim($("#txtPromtComfirPassword").val());
                vfcOkPassword(Password, ComfirPassword, "txtPromtComfirPassword");
            })

            //判断验证码当前输入状态
            $("#txtValidata").blur(function () {
                var ValiCode = $.trim($("#txtValidata").val());
                vfcCode(ValiCode, "txtValidata");
            })
        }

        //及时响应操作
        function ChangeOnTime() {
            //判断验证码错误修改信息
            $("#txtValidata").keypress(function () {
                var ErrorMessage = $("#register_notice").text();
                var ValiStr = $(this).val();
                if (ErrorMessage.indexOf("验证码") >= 0 && ValiStr != "请输入验证码") {
                    $("#register_notice").text("");
                }
            })

            //判断用户名错误修改信息
            $("#txtUserName").keypress(function () {
                var ErrorMessage = $("#register_notice").text();
                var ValiStr = $(this).val();
                if (ErrorMessage.indexOf("用户名") >= 0 && ValiStr != "请输入邮箱") {
                    $("#register_notice").text("");
                }
            })

            //判断密码错误修改信息
            $("#pwdPassword").keypress(function () {
                var ErrorMessage = $("#register_notice").text();
                var ValiStr = $(this).val();
                if ((ErrorMessage.indexOf("密码") >= 0 && ValiStr != "请输入密码") || ErrorMessage.indexOf("两次密码不一致") >= 0) {
                    $("#register_notice").text("");
                }
            })

            //判断确认密码错误修改信息
            $("#pwdComfirPassword").keypress(function () {
                var ErrorMessage = $("#register_notice").text();
                var ValiStr = $(this).val();
                if ((ErrorMessage.indexOf("确认密码") >= 0 && ValiStr != "请输入确认密码") || ErrorMessage.indexOf("两次密码不一致") >= 0) {
                    $("#register_notice").text("");
                }
            })
        }


        //注册功能
        function Register(sEbtn) {
            var UserName = $.trim($("#txtUserName").val());
            if (!vfcUser(UserName, "txtUserName")) { //验证用户名
                return;
            }

            var Password = $.trim($("#txtPromtPassword").val());
            if (!vfcPassword(Password, "txtPromtPassword")) { //验证密码
                return;
            }

            var ComfirPassword = $.trim($("#txtPromtComfirPassword").val());
            if (!vfcOkPassword(Password, ComfirPassword, "txtPromtComfirPassword")) { //验证密码是否一致
                return;
            }

            var ValiCode = $.trim($("#txtValidata").val());
            if (!vfcCode(ValiCode, "txtValidata")) { //验证验证码
                return;
            }
            if ($("#chkAgreeProtecol").attr("checked") != "checked") {
                layer.tips('请同意地接客服务协议!', $("#chkAgreeProtecol"), { guide: 0, time: 5 });
                return;
            }
            btnDo(sEbtn, UserName, Password, ComfirPassword, ValiCode);
        }

        function btnDo(sEbtn, UserName, Password, ComfirPassword, ValidataCode) {
            GtGrid1Action = sEbtn;
            var opart = GetGtParam(UserName, Password, ComfirPassword, ValidataCode);
            ajaxComm(opart);
            layer.load('正在为你提交,请稍后', 1);
        };

        function init() {
            var opart = new jsonRow();
            opart = addNoAreStatistics(opart, "", "w0002");
            opart.AddCell("ACTION", "init");
            opart.AddCell("invatationCode", $("#invatationCode").val());
            ajaxComm(opart);
        }

        init();
        //执行AJAX调用时获取参数
        function GetGtParam(account, password, okPassword, code) {
            var _jsParam = new jsonRow();
            _jsParam.AddCell("account", account);
            _jsParam.AddCell("password", password);
            _jsParam.AddCell("okPassword", okPassword);
            _jsParam.AddCell("invatationCode", $("#invatationCode").val());
            _jsParam.AddCell("code", code);
            _jsParam.AddCell("ACTION", GtGrid1Action);
            return _jsParam;
        };

        //验证用户名
        function vfcUser(UserName, id) {
            if (IsNull(UserName)) {
                layer.tips('请输入邮箱。', $("#" + id + ""), { guide: 1, time: 5 });
                return false;
            }
            if (!IsEmail(UserName)) {
                layer.tips('邮箱格式不正确。', $("#" + id + ""), { guide: 1, time: 5 });
                return false;
            }
            if (UserName.toUpperCase().indexOf("地接客") >= 0 || UserName.toUpperCase().indexOf("DJK") >= 0 || UserName.toUpperCase().indexOf("DIJIEKE") >= 0) {
                layer.tips('该邮箱已被注册。', $("#" + id + ""), { guide: 1, time: 5 });
                return false;
            }
            return true;
        }

        //验证密码
        function vfcPassword(Password, id) {
            if (IsNull(Password)) {
                layer.tips('密码长度只能在6~16为之间!。', $("#" + id + ""), { guide: 1, time: 4 });
                return false;
            }
            if (!islength(Password, 6, 16)) {
                layer.tips('*密码长度只能在6~16为之间!', $("#" + id + ""), { guide: 1, time: 4 });
                return false;
            }
            return true;
        }

        //验证确认密码
        function vfcOkPassword(Password, ComfirPassword, id) {
            if (IsNull(ComfirPassword)) {
                layer.tips('*请确认密码', $("#" + id + ""), { guide: 1, time: 4 });
                return false;
            }
            if (Password != ComfirPassword) {
                layer.tips('*两次密码输入不相同', $("#" + id + ""), { guide: 1, time: 5 });
                return false;
            }
            return true;
        }

        //验证验证码
        function vfcCode(ValiCode, id) {
            if (IsNull(ValiCode)) {
                layer.tips('*验证码不能为空', $("#" + id + ""), { guide: 0, time: 3 });
                return false;
            }
            if (ValiCode.length != 4) {
                layer.tips('*验证码长度只能是四位', $("#" + id + ""), { guide: 0, time: 4 });
                ChangeValidata();
                return false;
            }
            if (!isStr(ValiCode)) {
                layer.tips('*验证码只能是数字和字母组合', $("#" + id + ""), { guide: 0, time: 4 });
                ChangeValidata();
                return false;
            }
            return true;
        }
    </script>
</body>
</html>
